<#-- User: soft Date: 2018/11/11 15:46 -->
<#assign email="active">
<#include "header.ftl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
<article class="content">
  <div class="col-xs-12">
    <div class="pull-left">
      <h4 class="title">邮件通知</h4>
    </div>
    <div class="pull-right">
      <div style="padding: 15px 0;">
        <button @click="saveTemplate" class="btn btn-sm btn-warning">保存模板</button>
        <button @click="chooseTemplate" class="btn btn-sm btn-info">选择模板</button>
        <button @click="newTemplate" class="btn btn-sm btn-default">新建模板</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <div class="input-group">
            <label class="input-group-addon">标题</label>
            <input v-model="template.title" type="text" class="form-control">
          </div>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <div class="input-group">
            <label class="input-group-addon">发送者</label>
            <input v-model="template.sendFrom" type="text" class="form-control">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-12">
    <div aria-placeholder="邮件通知..." class="weditor"></div>
  </div>
  <div class="col-xs-12 top-10">
    <div class="pull-left">
      <pre>{name}-用户名,{stuId}-学号,{grade}-班级,{group}-分组意向,{time}-日期,{return}-反馈链接</pre>
    </div>
    <div class="pull-right">
      <div class="pull-left" style="margin: 0 5px;">
        <select v-model="status" class="form-control sm-input">
          <option value="">发送目标</option>
          <option value="REG">报名</option>
          <option value="STAGE1">通过笔试</option>
          <option value="STAGE2">通过机试</option>
          <option value="STAGE3">录取</option>
        </select>
      </div>
      <div class="pull-left">
        <button @click="groupSend" class="btn btn-sm btn-success">群发</button>
      </div>
    </div>
  </div>

  <div class="col-xs-12 ">
    <a @click="showRecord_" href="javascript:" class="min-a-black">邮件记录</a>
  </div>
  <#--邮件模板-->
  <div id="email-templates" class="col-xs-12 top-10" style="display: none;">
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>发送者</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="templates.length<=0"><td colspan="10" class="text-center">暂无记录</td></tr>
        <tr is="temp-tr" v-for="(temp, index) in templates"
            :temp="temp" :index="index"></tr>
        </tbody>
      </table>
    </div>
  </div>
  <#--邮件记录-->
  <div id="record-box" style="display: none;" class="col-xs-12 top-10">
    <div class="table-responsive" style="height: 326px;">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>发送对象</th>
          <th>目标人数</th>
          <th>反馈人数</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="records.length<=0"><td colspan="10" class="text-center">暂无记录</td></tr>
        <tr is="record-tr" v-for="(re, index) in records"
            :record="re" :index="index"></tr>
        </tbody>
      </table>
    </div>
    <div class="text-center" v-if="page.rd.totalPages>1">
      <navigation :pages="page.rd.totalPages" :current.sync="page.rd.pageNum"
                  @navpage="gotoRdPage"/>
    </div>
    <div style="position: absolute;right: 15px;bottom: 5px;">
      <button @click="clearRecord" class="btn btn-xs btn-danger">清空</button>
    </div>
  </div>
  <#--邮件反馈记录-->
  <div id="return-box" style="display: none;" class="col-xs-12 top-10">
    <div class="table-responsive" style="height: 326px;">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>学号</th>
          <th>反馈情况</th>
          <th>提示次数</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-if="returns.length<=0"><td colspan="10" class="text-center">暂无记录</td></tr>
        <tr is="return-tr" v-for="(rt, index) in returns"
            :rt="rt" :index="index"></tr>
        </tbody>
      </table>
    </div>
    <div class="text-center" v-if="page.rt.totalPages>1">
      <navigation :pages="page.rt.totalPages" :current.sync="page.rt.pageNum"
                  @navpage="gotoRtPage"/>
    </div>
  </div>
</article>
<#--邮件记录-->
<template id="record-tr">
  <tr>
    <td>{{index+1}}</td>
    <td>{{record.title}}</td>
    <td><span :class="'status-'+record.status"></span></td>
    <td>{{record.pnum}}</td>
    <td>0</td>
    <td>{{record.datetime}}</td>
    <td>
      <button @click="showContent" class="btn btn-info btn-xs">查看</button>
      <button @click="lookReturnInfo" class="btn btn-xs btn-warning">反馈情况</button>
    </td>
  </tr>
</template>
<#--邮件模板-->
<template id="temp-tr">
  <tr>
    <td>{{index+1}}</td>
    <td>{{temp.title}}</td>
    <td>{{temp.sendFrom}}</td>
    <td>{{temp.datetime}}</td>
    <td>
      <button @click="useTemplate" class="btn btn-xs btn-success">启用</button>
      <button @click="delete_" class="btn btn-xs btn-danger">删除</button>
    </td>
  </tr>
</template>
<#--邮件反馈-->
<template id="return-tr">
  <tr>
    <td>{{index+1}}</td>
    <td>{{rt.info.name}}</td>
    <td>{{rt.info.stuId}}</td>
    <td>
      <span v-if="rt.status" class="label label-info">以反馈</span>
      <span v-if="!rt.status" class="label label-danger">未反馈</span>
    </td>
    <td>{{rt.resends}}</td>
    <td>{{rt.datetime}}</td>
    <td>
      <button @click="resend_" class="btn btn-xs btn-warning" :disabled="rt.status">提醒</button>
    </td>
  </tr>
</template>
<#include "footer.ftl">

<script>
  var evm = new Vue({
    el: '.content',
    data: {
      templates: [],
      template: {
        title: '', sendFrom: '', content: ''
      },
      status: '', // 发送目标状态
      records: [], // 邮件记录列表
      returns: [], // 邮件反馈列表
      page: {
        rd: {
          pageNum: 1,
          totalPages: 1
        },
        rt: {
          index: 0, // 保留当前记录索引
          pageNum: 1,
          totalPages: 1
        }
      }
    },
    methods: {
      saveTemplate: function () {
        if (this.formAuth()) {
          var self = this;
          self.template.content = getHtml();
          $.post('${root}/email/save', self.template, function (data) {
            if (data.success) {
              layer.msg('模板保存成功！', {time: 1200, icon: 6});
            } else {
              layer.msg(data.msg, {time: 1200, icon: 5});
            }
          });
        }
      },
      chooseTemplate: function() {
        this.getTemplates();
        layer.open({
          type: 1,
          title: '选择邮件模板',
          area: ['60%', '380px'],
          offset: '90px',
          move: false,
          content: $('#email-templates')
        });
      },
      getTemplates: function() {
        var self = this;
        $.post('${root}/email/page', {pageNum: 1, size: 1000}, function (data) {
          self.templates = [];
          if (data.success) {
            var ds = data.payload;
            self.templates = ds.content;
          }
        });
      },
      newTemplate: function () {
        this.template = {};
        setHtml("<p><br></p>");
      },
      groupSend: function () { // 群发
        if (this.formAuth()) {
          if (isEmpty(this.status)) {
            layer.msg('请选择发送目标！', {time: 1500, icon: 5});
            return;
          }
          var self = this;
          self.template.content = getHtml();
          var inx = layer.msg('邮件发送中...', {icon: 4, time: 15 * 1000});
          $.post('${root}/email/send', $.extend({}, self.template, {status: self.status}), function (data) {
            layer.close(inx);
            if (data.success) {
              layer.msg('邮件已全部发送完毕！', {icon: 6, time: 1500});
            } else {
              layer.msg(data.msg, {icon: 5, time: 1500});
            }
          });
        }
      },
      showRecord_: function() {
        var self = this;
        this.getRecords(function () {
          var h = 380;
          if (self.page.rd.totalPages > 1) h += 40;
          layer.open({
            type: 1,
            title: '邮件发送记录',
            area: ['60%', h + 'px'],
            offset: '90px',
            move: false,
            content: $('#record-box')
          });
        });
      },
      gotoRdPage: function(page) {
        this.page.rd.pageNum = page;
        this.getRecords();
      },
      clearRecord: function() {
        var self = this;
        layer.confirm('确定清空邮件记录？', {icon: 7}, function (index) {
          $.post('${root}/email/record/clear', function (data) {
            if (data.success) {
              layer.msg('清空成功！', {icon: 6, time: 1200});
              self.records = [];
              self.page.rd.totalPages = 0;
              window.setTimeout(function () {
                layer.closeAll();
              }, 1200);
            } else {
              layer.msg(data.msg, {icon: 5});
            }
          });
        });
      },
      getRecords: function (callback) {
        var self = this;
        $.post('${root}/email/record/page', self.page.rd, function (data) {
          self.records = [];
          if (data.success) {
            self.records = data.payload.content;
            self.page.rd.pageNum = data.payload.number + 1;
            self.page.rd.totalPages = data.payload.totalPages;
            callback ? callback() : null;
          } else {
            layer.msg(data.msg, {time: 1200, icon: 7});
          }
        });
      },
      formAuth: function () {
        if (isEmpty(this.template.title)) {
          layer.msg('邮件标题不能为空！', {time: 1500, icon: 5});
          return false;
        } else if (isEmpty(this.template.sendFrom)) {
          layer.msg('邮件发送者不能为空！', {time: 1500, icon: 5});
          return false;
        } else if (getHtml().trim().length <= 12) {
          layer.msg('邮件内容不能为空！', {time: 1500, icon: 5});
          return false;
        }
        return true;
      },
      /////// 反馈
      getReturnPage: function (index, callback) {
        var self = this;
        var record = self.records[index];
        self.page.rt.index = index;
        $.post('${root}/email/return/page', $.extend({}, self.page.rt, {recordId: record.id}), function (data) {
          self.returns = [];
          if (data.success) {
            self.returns = data.payload.content;
            self.page.rt.pageNum = data.payload.number + 1;
            self.page.rt.totalPages = data.payload.totalPages;
            callback ? callback() : null;
          } else {
            layer.msg(data.msg + "", {time: 1200, icon: 7});
          }
        });
      },
      gotoRtPage: function (page) {
        this.page.rt.pageNum = page;
        this.getReturnPage(this.page.rt.index);
      }
    },
    components: {
      'return-tr': {
        props: ['index', 'rt'],
        template: '#return-tr',
        methods: {
          resend_: function () { // 像目标重新发送邮件
            var self = this;
            var rtn = self.rt;
            if (!rtn.status) {
              $.post('${root}/email/return/resend', {
                id: rtn.id,
                regId: rtn.regId,
                recordId: rtn.recordId
              }, function (data) {
                if (data.success) {
                  layer.msg('提示邮件发送成功！', {icon: 6, time: 1200});
                } else {
                  layer.msg(data.msg, {icon: 5});
                }
              });
            }
          }
        }
      },
      'record-tr': {
        props: ['index', 'record'],
        template: '#record-tr',
        methods: {
          showContent: function () {
            var content = '<div style="padding: 10px 20px;">' + this.record.content + '</div>';
            layer.open({
              type: 1,
              area: ['300px'],
              title: '邮件详情：[<b style="color:darkcyan;">'+this.record.title+'</b>]',
              shadeClose: true,
              content: content
            });
          },
          lookReturnInfo: function () { // rid-发送记录id
            var self = this;
            self.$root.getReturnPage(this.index, function () {
              var h = 380;
              if (self.$root.page.rt.totalPages > 1) h += 40;
              layer.open({
                type: 1,
                area: ['55%', h + 'px'],
                title: '邮件[<b style="color:darkcyan;">' + self.record.title + '</b>]反馈情况：',
                shadeClose: true,
                content: $('#return-box')
              });
            });
          }
        }
      },
      'temp-tr': {
        props: ['index', 'temp'],
        template: '#temp-tr',
        methods: {
          delete_: function () {
            var self = this;
            layer.confirm('确定要删除模板 ['+this.temp.title+']', {title: '提示！', icon: 3}, function (index) {
              layer.close(index);
              $.post('${root}/email/delete/' + self.temp.id, function (data) {
                if (data.success) {
                  self.$root.getTemplates();
                  layer.msg('删除成功！', {icon: 6, time: 1200});
                } else {
                  layer.msg(data.msg, {icon: 5});
                }
              });
            })
          },
          useTemplate: function () {
            this.$root.template = this.temp;
            setHtml(this.temp.content);
            layer.closeAll();
            layer.msg('启用成功！', {time: 1200});
          }
        }
      }
    },
    created: function() {

    }
  });

  function isEmpty(str) {
    return str == null || str.trim().length <= 0;
  }

  var E = window.wangEditor;
  var editor = new E('.weditor');
  editor.customConfig.uploadImgShowBase64 = true;
  editor.create();

  function setHtml(html) {
    editor.txt.html(html);
  }

  function getHtml() {
    return editor.txt.html();
  }
</script>
